<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    .demo {
      width: 200px;
      height: 200px;
      background-color: #6ff;
      padding: 10px;
      margin: 100px;
      /* opacity: 0; */
      /* visibility: hidden; */
      /* display: none; */
    }

    .sub {
      height: 1000px;
      width: 100px;
      background-color: #f00;
    }
  </style>
</head>

<body>
  <div class="demo">
    <div class="sub"></div>
  </div>
</body>
<script>
  // 获取元素的宽高
  var demo = document.getElementsByClassName("demo")[0];

  // 传统的方法
  var width = parseInt(getStyle(demo, "width"));
  var height = parseInt(getStyle(demo, "height"));
  // console.log(width,height);

  // 文档的可视宽高
  // document.documentElement.clientWidth||document.body.clientWidth

  // 
  // document.documentElement.scrollWidth||document.body.scrollWidth

  // console.dir(demo);

  // clientWidth / clientWidth   元素的可视宽高  
  // 优点: 快捷获取

  // 缺点:
  // 1. 只能取值不能赋值
  // 2. 元素的可视宽高 (content + padding)
  // 3. 对于隐藏(display: none;)的元素  clientWidth / clientWidth 不生效 => 0

  // 总结: 可以快捷获取元素的宽高 ,但是在使用之前分析 宽高是否包含padding,元素是否隐藏

  console.log(demo.clientWidth, demo.clientHeight);


  // 了解
  // scrollWidth / scrollWidth   元素的实际宽高(元素实际占据的宽高) 
  // console.log(demo.scrollWidth,demo.scrollHeight);


  function getStyle(ele, attr) {
    if (window.getComputedStyle) {
      return window.getComputedStyle(ele)[attr];
    } else {
      return ele.currentStyle[attr];
    }
  }


</script>

</html>